import React, { useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Button, message, Modal, Form, Input, Select, Radio, Space } from 'antd';
import ATable from '@apulis/table'
import type { ATableColumn, SearchToolBarProps } from '@apulis/table';
import type { ActionType } from '@apulis/table/lib/typing';
import { apdeviceRequest } from '@/utils/request';
import { Link } from 'umi';
import trans from '@/utils/translate';
import { listAPI, deleteDevice } from './service';


export interface device {
  id: number;
  createdAt: number;
  updatedAt: number;
  deletedAt: null
  name: string;
  brand: string;
  model: string
  sn: string;
  firmwareVersion: string;
  ip: string;
  port: number;
  proto: string;
  status: string;
  user: string;
  passwd: string;
  creator: string;
  desc: string;
}

const CentralInference: React.FC = (props) => {
  const { Item } = Form;
  const { Option } = Select;
  const tableRef = useRef<ActionType>();
  const [modal, setModal] = useState(false);
  const columns: ATableColumn[] = [
    {
      title: trans('device.app.order'),
      dataIndex: 'name1',
      render: (text, record) => (
        <Link to={`/node-management/terminal-device/detail/${record.serviceId}`}>{text}</Link>
      )
    },
    {
      title: trans('device.app.status'),
      dataIndex: 'name1',
    },
    {
      title: trans('device.inference.type'),
      dataIndex: 'v',
    },
    {
      title: trans('device.inference.service'),
      dataIndex: 'name1',
    },
    {
      title: trans('device.data.return'),
      dataIndex: 'name1',
    },
    {
      title: trans('info.creator'),
      dataIndex: 'name1',
    },
    {
      title: trans('info.createdAt'),
      dataIndex: 'name1',
      // format: 'time',
      sortable: true,
    },
    {
      title: trans('operation'),
      dataIndex: '',
      render: (text: string, record: device) => {
        return (
          <div style={{display: 'flex', justifyContent: 'space-between'}}>
            <Link to='/'>{trans('device.inference.result.see')}</Link>
            <Link to='/'>{trans('operation.stop')}</Link>
            <a href="#" onClick={() => handleDelete(record.id)}>{trans('common.delete')}</a>
          </div>
        )
      }
    }
  ]
  const searchList: SearchToolBarProps[] = [
    {
      type: 'dateRange',
      name: 'time',
    },
    {
      type: 'input',
      name: 'name',
      placeholder: trans('device.inference.service.please'),
    },
    {
      type: 'input',
      name: 'creator',
      placeholder: trans('info.creator.please'),
    }
  ]

  const handleDelete = (id: number) => {
    deleteDevice(id).then(res => {
      if (res && res.code === 0) {
        message.success(trans('operation.delete.success'));
        tableRef.current?.reload();
      }
    })
  }
  return (
    <PageContainer>
      <Card>
        <ATable
          actionRef={tableRef}
          request={apdeviceRequest}
          dataSourceAPIPath={listAPI}
          searchToolBar={searchList}
          columns={columns}
          rowKey='name'
          leftToolBar={(
            <Button type='primary' onClick={() => setModal(true)}>{trans('device.app.create')}</Button>
          )}
        ></ATable>
      </Card>
      <Modal
        title={trans('device.app.create')}
        width='400px'
        visible={modal}
        onCancel={()=>setModal(false)}
      >
        <Form>
          <Item label={trans('device.video.frame.extraction.resolution')}>
            <Select defaultValue='origin'>
              <Option value='origin'>{trans('device.video.resolution.origin')}</Option>
              <Option value='1080P'>1080P</Option>
              <Option value='720P'>720P</Option>
              <Option value='480P'>480P</Option>
            </Select>
          </Item>
          <Item label={trans('device.video.frame.extraction.interval')}>
            <Space>
              <Input></Input>
              <Select></Select>
            </Space>
          </Item>
          <Item label={trans('device.inference.type')} initialValue='central'>
            <Radio.Group>
              <Radio value='central'>{trans('device.inference.central')}</Radio>
              <Radio value='edge'>{trans('device.inference.edge')}</Radio>
            </Radio.Group>
          </Item>
          <Item label={trans('device.inference.service')}>
            <Space>
              <Select style={{width:'150px'}}></Select>
              <Link to='/'>{trans('device.inference.create')}</Link>
            </Space>
          </Item>
        </Form>
      </Modal>
    </PageContainer>
  )
}

export default CentralInference;
